<template>
<q-dialog persistent fixed v-model="isCreateDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
    <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
        <q-header class="bg-grey-10 shadow-7">

            <q-toolbar>
                <q-toolbar-title>创建项目</q-toolbar-title>
                <q-space />

                <q-btn dense flat icon="close" @click="trigerUpdate('close')">
                </q-btn>
            </q-toolbar>

        </q-header>
        <q-footer class="bg-grey-10 text-white q-pa-sm shadow-up-7">

            <q-toolbar inset>

                <q-space></q-space>
                <q-btn outline class="q-px-md q-mr-sm" @click="cancleCreateProject"> 取消</q-btn>
                <q-btn outline class="q-px-md" @click="submitCreateProject"> 创建</q-btn>
            </q-toolbar>
        </q-footer>
        <q-page-container>
            <q-page padding class="bg-dark row hide-scrollbar">

                <q-card flat style="width: 100%" class="back-dark column">

                    <!-- <q-separator color="grey"></q-separator> -->
                    <q-card-section class="q-px-md q-mx-md">
                        <q-form ref="createForm" class="column q-gutter-sm">
                            <q-input filled dark v-model="createProject.name" label="项目名称" maxlength="12" counter lazy-rules :rules="[(val) => (val !== null && val !== '') || '请输入项目名']" />
                            <q-select filled dark v-model="createProject.type" :options="typeOptions" option-label="typename" option-value="pt_id" label="项目类型" />
                            <q-select filled dark v-model="createProject.rank" :options="ranksOptions" option-label="name" option-value="val" label="项目级别" />
                            <q-select filled dark v-model="createProject.permission" :options="permissionOptions" option-label="name" option-value="val" label="项目权限" />

                            <q-select filled dark v-model="createProject.resolution" :options="resolutions" option-label="name" option-value="val" label="分辨率" />

                            <q-select filled dark v-model="createProject.fps" :options="[25, 50, 60]" label="帧率" />
                            <q-select filled dark v-model="createProject.aspectRatio" :options="['16:9', '2.35:1']" label="画面比例" />
                            <div class="row no-wrap items-center justify-between">
                                <q-input filled dark v-model="createProject.lastTime.from" label="开始时间" lazy-rules :rules="[(val) => (val !== null && val !== '') || '请输入开始时间',(val) => (/^(\d{4})\/(\d{2})\/(\d{2})$/.test(val)) || '日期格式不正确（yyyy/mm/dd）']" debounce="500">
                                    <template v-slot:prepend>
                                        <q-icon size="30px" name="event" class="cursor-pointer">
                                            <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                                                <q-date v-model="createProject.lastTime" minimal range mask="YYYY/MM/DD">
                                                    <div class="row items-center justify-end">
                                                        <q-btn v-close-popup label="确认" color="primary" flat />
                                                    </div>
                                                </q-date>
                                            </q-popup-proxy>
                                        </q-icon>
                                    </template>
                                </q-input>
                                <span class="q-mx-sm text-bold">—</span>
                                <q-input filled dark v-model="createProject.lastTime.to" label="结束时间" lazy-rules :rules="[(val) => (val !== null && val !== '') || '请输入开始时间',(val) => (/^(\d{4})\/(\d{2})\/(\d{2})$/.test(val)) || '日期格式不正确（yyyy/mm/dd）']" debounce="500">

                                </q-input>
                            </div>
                        </q-form>
                    </q-card-section>
                    <q-card-section class="q-px-md q-mx-md">
                        <div class="row justify-between items-center">
                            <div class="text-h6">项目成员</div>
                            <q-btn flat @click="handleSelectMemeber" dense color="primary" class="text-caption">
                                <q-icon size="20px" name="mdi-account-edit-outline"></q-icon>选择成员
                            </q-btn>
                        </div>
                        <q-separator color="grey"></q-separator>
                        <member-list :memberList="projectMembers" @update="updatePermission" @remove="removeSelectedMember"></member-list>

                    </q-card-section>

                </q-card>
                <member-select ref="memberSelect" :memberList="projectMembers" :isMemSeleteDialog="isMemSeleteDialog" @update="memberSelectedRes"></member-select>

            </q-page>
        </q-page-container>

    </q-layout>

</q-dialog>
</template>

<script>
import {
    createProject,
    getProjectType
} from "assets/api/project";
export default {
    name: 'CreateProject',
    components: {
        MemberSelect: () => import("components/MemberSelect"),
        MemberList: () => import('components/MemberList.vue')
    },
    props: {
        isCreateDialog: {
            default: false
        },
        user: {
            type: Object
        }
    },
    data() {
        return {
            createProject: {
                name: "",
                type: {
                    pt_id: 3,
                    typename: '宣传片'
                },
                resolution: {
                    name: "HD(1080P)",
                    val: "HD",
                },
                fps: 25,
                permission: {
                    name: "不对外开放",
                    val: 0,
                },

                lastTime: {
                    from: "",
                    to: "",
                },
                rank: {
                    name: "重要紧急",
                    val: 0,
                },
                aspectRatio: "16:9",
                memerList: [],
            },
            resolutions: [{
                    name: "UHD(4k)",
                    val: "UHD",
                },
                {
                    name: "HD(1080P)",
                    val: "HD",
                },
            ],
            ranksOptions: [{
                    name: "重要紧急",
                    val: 0,
                },
                {
                    name: "重要不紧急",
                    val: 1,
                },
                {
                    name: "紧急不重要",
                    val: 2,
                },
                {
                    name: "不紧急不重要",
                    val: 3,
                },
            ],
            permissionOptions: [{
                    name: "不对外开放",
                    val: 0,
                },
                {
                    name: "需要申请加入",
                    val: 1,
                }, {
                    name: "默认可查看",
                    val: 2,
                }, {
                    name: "默认可编辑",
                    val: 3,
                },
            ],
            typeOptions: [],
            isMemSeleteDialog: false,
            createUser: [],
            projectMembers: []
        }
    },
    watch: {
        isCreateDialog: function (val) {
            console.log(val, 'createproject');
            if (val) {
                let user = this.user;
                user.name = user.username;
                user.permission = 5;
                if (this.createUser.length == 0) {
                    this.createUser.push(user);

                }
                if (this.projectMembers.length == 0) {
                    this.projectMembers = this.createUser.concat(this.projectMembers)
                }
                this.loadprojectType()
            }
        }
    },
    methods: {
        loadprojectType() {
            getProjectType().then(res => {
                console.log(res);
                this.typeOptions = res.data.data
            })
        },
        updatePermission(i, v) {
            this.projectMembers.forEach(item => {
                if (item.username == i.username) {
                    item.permission = v;
                }
            })
        },
        removeSelectedMember(item) {

            let index = this.projectMembers.findIndex(i => i.username == item.username);
            if (index != -1) {
                this.projectMembers.splice(index, 1)
            }
            item.name = item.username;
            this.$refs.memberSelect.removeSelected(item)
        },
        memberSelectedRes(msg, data) {
            if (msg == 'close') {
                this.isMemSeleteDialog = false;
            } else {
                this.isMemSeleteDialog = false;
                this.projectMembers = [];
                let newData = []
                data.forEach(item => {
                    let index = this.createUser.findIndex(i => i.username == item.name)
                    if (index == -1) {
                        newData.push(item)
                    }
                })
                console.log('newdata', newData, data);
                this.projectMembers = this.createUser.concat(newData)

            }

        },
        handleSelectMemeber() {
            this.isMemSeleteDialog = true;
        },
        trigerUpdate(type) {
            this.$emit('update', type)
        },
        handleReset() {
            this.createProject = {
                name: "",
                type: {
                    pt_id: 3,
                    typename: '宣传片'
                },
                resolution: {
                    name: "HD(1080P)",
                    val: "HD",
                },
                fps: 25,
                permission: {
                    name: "不对外开放",
                    val: 0,
                },

                lastTime: {
                    from: "",
                    to: "",
                },
                rank: {
                    name: "重要紧急",
                    val: 0,
                },
                aspectRatio: "16:9",
                memerList: [],
            },
            this.projectMembers = []
        },

        cancleCreateProject() {
            this.trigerUpdate();
            // 重置验证：
            this.handleReset();
            this.$refs.createForm.resetValidation()

        },
        submitCreateProject() {
            this.$refs.createForm.validate().then(success => {
                if (success) {
                    this.createProject.memberList = this.projectMembers;
                    this.$q.loading.show({
                        customClass: 'mypage-loading',
                        message: '<span class="text-white text-weight-bold">创建中...</span>'
                    })
                    return createProject({
                        data: this.createProject
                    })

                } else {
                    // 哦，不，用户至少
                    // 填写了一个无效值
                }
            }).then(res => {
                this.$q.loading.hide();
                if (res.data.code == 1) {
                    this.handleReset();
                    this.trigerUpdate('reload');

                    this.$message.success('创建成功')
                } else {
                    this.$message.error(res.code.err)
                }
            })

        },
    }
}
</script>
